{% extends 'studentTemp.html' %}

{% block content %}
    <div class="card border-0 shadow-sm">



        <div class="bs-example" data-example-id="panel-without-body-with-table">
            <div class="panel panel-default">
              <div class="card-body">
                <h3>{{ title }}</h3>



                <table class="table table-bordered table-condensed table1" style="text-align: center">
                    <thead>
                    <tr>
                        <th>多选框</th>
                        <th>发起人</th>
                        <th>发布时间</th>
                        <th>教学反馈</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for i in student_dest %}
                        <tr>
                            <td>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                                    </label>
                                </div>
                            </td>
                            <td>{{ i.Releasetime }}</td>
                            <td>{{ i.teacherRmation }}</td>
                            <td>{{ i.Texts }}</td>
                            <td>
                                <button class="btn btn-sm btn-success add-btn submit-btn"  onclick="submitForm(this)">填写</button>
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>
        <ul class="pagination" style="margin: 0px 16px">
            {{ page_string }}
        </ul>
    </div>

    </div>
    </div>


{% endblock content %}
{% block test %}
    {#  新建  #}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="false"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <form style="margin: 10px 10px" id="addform">
                    <div class="modal-body">
                        <div class="clearfix">
                            {% for em in form_data %}
                                <div class="col-xs-12">
                                    <div class="form-group" style="position: relative;margin-bottom:15px;">
                                        <label>{{ em.label }}:</label>
                                        {{ em }}
                                        <span style="color:red;position: absolute;" class="err-img"></span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn3" data-bs-dismiss="modal">关 闭</button>
                    <button type="button" class="btn btn-primary btn1">提 交</button>
                </div>
            </div>
        </div>
    </div>

{% endblock test %}


{% block js %}
    <script>
        //页面加载完成自动执行
        $(function () {
            bindBtn();
            btnAdd();
            submitForm();
        });

        //显示框
        function btnAdd() {
            $('.add-btn').click(function () {
                //清空对话框里的内容
                $('#addform')[0].reset();
                //修改标题
                $('.modal-title').text('填写教学评价信息');
                //显示新建订单框
                $('#myModal').modal('show');
            })
        };

        //填写
        function bindBtn() {
            //当点击提交按钮的时候 进行判断是新建还是编辑
            $('.btn1').click(function () {
                //清除错误信息
                $('.err-img').empty();
                doAdd();
            })
        }



        //向后端发送新建请求
         function doAdd() {
            //向后台发送ajax请求
            $.ajax({
                url: '/student/rmation/add/',
                type: 'post',
                data: $('#addform').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    if (res.static) {
                        alert('填写成功');
                        //清空表单
                        $('#addform')[0].reset();
                        //关闭框
                        $('#myModal').modal('hide');
                        //刷新页面
                        location.reload();
                    } else {
                        {#遍历错误信息#}
                        $.each(res.error, function (name, data) {
                            $("#id_" + name).next().text(data[0])
                        })
                    }
                }
            })
        };

        // 设置按钮状态
        function submitForm(button) {
            
            // 禁用按钮，避免用户重复提交
            button.disabled = true;

        }


    </script>
{% endblock js %}